<section class="main">
  <div
    *ngIf="(workContextService.mainWorkContext$|async) as mainContext"
    [class.hasTasks]="mainContext.taskIds.length"
    [class.isActiveContext]="mainContext.id===activeWorkContextId"
    class="tag"
  >
    <div
      [style.background]="mainContext.theme.primary"
      class="tag-color"
    ></div>
    <button
      #menuEntry
      [routerLink]="['tag', mainContext.id, 'tasks']"
      mat-menu-item
      routerLinkActive="isActiveRoute"
    >
      <span class="badge">{{mainContext.taskIds.length}}</span>
      <mat-icon>{{mainContext.icon}}</mat-icon>
      <span class="text">{{mainContext.title}}</span>
    </button>

    <button
      [mat-menu-trigger-for]="tagMenu"
      class="tag-settings-btn"
      mat-icon-button
      routerLinkActive="isActiveRoute"
    >
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #tagMenu="matMenu">
      <ng-template matMenuContent>
        <work-context-menu
          [contextId]="mainContext.id"
          [contextType]="mainContext.type"
        ></work-context-menu>
      </ng-template>
    </mat-menu>
  </div>

  <!-- class title missleading, but works ;) -->
  <div class="tag">
    <button
      class="route-link"
      mat-menu-item
      routerLink="timeline"
      routerLinkActive="isActiveRoute"
    >
      <mat-icon>filter_list</mat-icon>
      <span class="text">{{T.F.TIMELINE.MENU_TITLE|translate}}</span>
    </button>
    <button
      (click)="openTimelineSettings()"
      class="tag-settings-btn"
      mat-icon-button
    >
      <mat-icon>settings</mat-icon>
    </button>
  </div>

  <button
    #menuEntry
    class="route-link"
    mat-menu-item
    routerLink="schedule"
    routerLinkActive="isActiveRoute"
  >
    <mat-icon>access_alarms</mat-icon>
    <span class="text">{{T.MH.SCHEDULED|translate}}</span>
  </button>
</section>

<section
  *ngIf="projectList$|async as projectList"
  class="projects tour-projects"
>
  <button
    #menuEntry
    #projectExpandBtn
    (click)="toggleExpandProjects()"
    (keydown)="toggleExpandProjectsLeftRight($event)"
    [class.isExpanded]="isProjectsExpanded"
    class="expand-btn"
    mat-menu-item
  >
    <span class="title">{{T.MH.PROJECTS|translate}}</span>
    <mat-icon>expand_more</mat-icon>
  </button>

  <div
    [@standardList]="projectList?.length"
    [dragulaModel]="projectList"
    [dragula]="PROJECTS_SIDE_NAV"
  >
    <div
      (keydown)="checkFocusProject($event)"
      *ngFor="let project of projectList; trackBy: trackById;"
      [class.hasTasks]="project.taskIds.length"
      [class.isActiveContext]="project.id===activeWorkContextId"
      [class.isHidden]="project.isHiddenFromMenu"
      class="project"
    >
      <div
        [ngStyle]="getThemeColor(project.theme?.primary || project.themeColor)"
        class="project-color"
      ></div>
      <button
        #menuEntry
        [routerLink]="['project', project.id, 'tasks']"
        mat-menu-item
      >
        <span class="badge"
          >{{project.taskIds.length}}{{project.isEnableBacklog ? '/' +
          project.backlogTaskIds.length : ''}}
        </span>
        <mat-icon
          class="drag-handle"
          drag-handle
          >list
        </mat-icon>
        <span class="text">{{project.title}}</span>
      </button>

      <button
        [matMenuTriggerFor]="projectMenu"
        class="project-settings-btn"
        mat-icon-button
        routerLinkActive="isActiveRoute"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #projectMenu="matMenu">
        <ng-template matMenuContent>
          <work-context-menu
            [contextId]="project.id"
            [project]="project"
            [contextType]="WorkContextType.PROJECT"
          ></work-context-menu>
        </ng-template>
      </mat-menu>
    </div>
  </div>

  <button
    #menuEntry
    *ngIf="isProjectsExpanded"
    mat-menu-item
    routerLink="project-overview"
    routerLinkActive="isActiveRoute"
  >
    <mat-icon>format_list_numbered_rtl</mat-icon>
    <span class="text">{{T.MH.MANAGE_PROJECTS|translate}}</span>
  </button>

  <button
    #menuEntry
    (click)="addProject()"
    *ngIf="isProjectsExpanded"
    mat-menu-item
  >
    <mat-icon>add</mat-icon>
    <span class="text">{{T.MH.CREATE_PROJECT|translate}}</span>
  </button>
</section>

<section
  *ngIf="(tagList$|async) as tagList"
  class="tags"
>
  <button
    #menuEntry
    #tagExpandBtn
    (click)="toggleExpandTags()"
    (keydown)="toggleExpandTagsLeftRight($event)"
    [class.isExpanded]="isTagsExpanded"
    class="expand-btn"
    mat-menu-item
  >
    <span class="title">{{T.MH.TAGS|translate}}</span>
    <mat-icon>expand_more</mat-icon>
  </button>

  <div
    *ngIf="tagList.length"
    [@standardList]="tagList?.length"
    [dragulaModel]="tagList"
    [dragula]="TAG_SIDE_NAV"
  >
    <div
      (keydown)="checkFocusTag($event)"
      *ngFor="let tag of tagList; trackBy: trackById;"
      [class.hasTasks]="tag.taskIds.length"
      [class.isActiveContext]="tag.id===activeWorkContextId"
      class="tag"
    >
      <div
        [style.background]="tag?.theme.primary"
        class="tag-color"
      ></div>
      <button
        #menuEntry
        [routerLink]="['tag', tag.id, 'tasks']"
        mat-menu-item
      >
        <span class="badge">{{tag.taskIds.length}}</span>
        <mat-icon
          class="drag-handle"
          drag-handle
          >style
        </mat-icon>
        <span class="text">{{tag.title}}</span>
      </button>

      <button
        [mat-menu-trigger-for]="tagMenu"
        class="tag-settings-btn"
        mat-icon-button
        routerLinkActive="isActiveRoute"
      >
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #tagMenu="matMenu">
        <ng-template matMenuContent>
          <work-context-menu
            [contextId]="tag.id"
            [contextType]="WorkContextType.TAG"
          ></work-context-menu>
        </ng-template>
      </mat-menu>
    </div>
  </div>
  <div
    *ngIf="!tagList.length && isTagsExpanded"
    class="no-tags-info"
  >
    {{T.MH.NO_TAG_INFO|translate}}
  </div>

  <!--  <button (click)="addTag()"-->
  <!--          *ngIf="isTagsExpanded"-->
  <!--   #menuEntry mat-menu-item>-->
  <!--    <mat-icon>add</mat-icon>-->
  <!--    {{T.MH.CREATE_TAG|translate}}-->
  <!--  </button>-->
</section>

<section class="app">
  <button
    #menuEntry
    [mat-menu-trigger-for]="helpMenu"
    class="route-link"
    mat-menu-item
  >
    <mat-icon>help_center</mat-icon>
    <span class="text">{{T.MH.HELP|translate}}</span>
  </button>

  <mat-menu #helpMenu="matMenu">
    <ng-template matMenuContent>
      <a
        mat-menu-item
        href="https://github.com/johannesjo/super-productivity/blob/master/README.md#question-how-to-use-it"
        target="_blank"
      >
        <mat-icon>help_center</mat-icon>
        <span class="text">{{T.MH.HM.GET_HELP_ONLINE|translate}}</span>
      </a>

      <a
        class="route-link"
        mat-menu-item
        [href]="getGithubErrorUrl()"
        target="_blank"
      >
        <mat-icon>bug_report</mat-icon>
        <span class="text">{{T.MH.HM.REPORT_A_PROBLEM|translate}}</span>
      </a>

      <a
        mat-menu-item
        href="https://github.com/johannesjo/super-productivity/blob/master/CONTRIBUTING.md"
        target="_blank"
      >
        <mat-icon>volunteer_activism</mat-icon>
        <span class="text">{{T.MH.HM.CONTRIBUTE|translate}}</span>
      </a>

      <button
        (click)="startTour(TourId.Welcome)"
        mat-menu-item
      >
        <mat-icon>directions</mat-icon>
        <span class="text">{{T.MH.HM.START_WELCOME|translate}}</span>
      </button>
      <button
        *ngIf="IS_MOUSE_PRIMARY"
        (click)="startTour(TourId.KeyboardNav)"
        mat-menu-item
      >
        <mat-icon>directions</mat-icon>
        <span class="text">{{T.MH.HM.KEYBOARD|translate}}</span>
      </button>
      <button
        (click)="startTour(TourId.Sync)"
        mat-menu-item
      >
        <mat-icon>directions</mat-icon>
        <span class="text">{{T.MH.HM.SYNC|translate}}</span>
      </button>
      <button
        (click)="startTour(TourId.Calendars)"
        mat-menu-item
      >
        <mat-icon>directions</mat-icon>
        <span class="text">{{T.MH.HM.CALENDARS|translate}}</span>
      </button>
    </ng-template>
  </mat-menu>

  <button
    #menuEntry
    class="route-link tour-settingsMenuBtn"
    mat-menu-item
    routerLink="config"
    routerLinkActive="isActiveRoute"
  >
    <mat-icon>settings</mat-icon>
    <span class="text">{{T.MH.SETTINGS|translate}}</span>
  </button>
</section>

<!-- NOTE: needs to be here for mat menu styles always to be loaded -->
<mat-menu></mat-menu>
